<template>
	<div class="loading" v-if="isLoading" @click="loadingClick">
		<div class="bg">
			<img src="@/assets/img/home/full-screen-loading.gif" alt="" />
		</div>
	</div>
</template>

<script setup>
	import useMainStore from "@/stores/modules/main"
	import { storeToRefs } from "pinia"
	const mainStore = useMainStore()
	const { isLoading } = storeToRefs(mainStore)
	const loadingClick = () => {
		isLoading.value = false
	}
</script>
<style scoped>
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		background-color: rgba(0, 0, 0, 0.4);
		align-items: center;
		justify-content: center;
	}
	.bg {
		display: flex;
		height: 104px;
		width: 104px;
		background: url(@/assets/img/home/loading-bg.png) 0 0 /100% 100%;
		justify-content: center;
		align-items: center;
	}
	img {
		width: 70px;
		height: 70px;
		margin-bottom: 10px;
	}
</style>
